<script setup lang="ts">
import {computed, ref} from 'vue';
import {storeToRefs} from 'pinia';
import {useGlobalStore} from '@/store/global.ts';
const active = ref(0);

const {badge} = storeToRefs(useGlobalStore());

const inactiveColor = computed(() => {
    if (badge.value > 0) {
        return '#7d7e80';
    }
    return '#cccccc';
});

const handleBeforeChange = () => {
    return badge.value > 0;
};
</script>

<template>
    <RouterView />
    <footer>
        <van-tabbar
            v-model="active"
            route
            :inactive-color="inactiveColor"
            :before-change="handleBeforeChange"
        >
            <van-tabbar-item
                replace
                to="/"
                icon="home-o"
            >
                领用
            </van-tabbar-item>
            <van-tabbar-item
                replace
                to="/return"
                icon="setting-o"
                :badge="badge"
            >
                归还
            </van-tabbar-item>
        </van-tabbar>
    </footer>
</template>

<style scoped lang="less"></style>
